<template>
	<view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
		<!-- 首部导航栏 -->
    <view class="nav-bar-box">
      <view class="nav-bar">
          <view class="search-box" @click="search">
            <image class="search-img" src="../../static/img/search.png"></image>
          </view>
        <!-- 关注和发现的切换列表 -->
        	<view class="tab-box">
        	  <view class="tab-item" :class="data.tabIndex == 0 ? 'tab-item-actived' : ''" @click="changeTab(0)">
        	    <text class="tab-text">关注</text>
        	  </view>
        	  <view class="tab-item" :class="data.tabIndex == 1 ? 'tab-item-actived' : ''" @click="changeTab(1)">
        	    <text class="tab-text">发现</text>
        	  </view>
        	</view>					
      </view>
    </view>
    <!-- 笔记列表 -->
    <view class="note-list-view">
       <swiper class="tab-swiper" :current="data.tabIndex" @change="changeTab($event.detail.current)">
         <!-- 关注 -->
          <swiper-item class="tab-swiper-item note-now">
            <scroll-view class="note-list" scroll-y="true" lower-threshold="50" @scrolltolower="getMoreattNote"  refresher-enabled="true" @refresherrefresh="refreshAttNote" :refresher-triggered="data.isRefreshAtt" @refresherpulling="refresherpullingAttFun">
              <view class="waterfall">
                <!-- 笔记 -->
                <view class="flowList">
                  <view class="note" v-for="idx in data.attLeft" @click="showNote(data.attList[idx].id,idx)">
                    <!-- 笔记封面 -->
                    <view class="note-img-box">
                      <image mode="widthFix" lazy-load="true" class="note-img" :src="data.attList[idx].url"></image>
                    </view>
                    <!-- 笔记标题内容 -->
                    <view class="note-content-box">
                      <rich-text class="note-text">{{data.attList[idx].title}}</rich-text>
                    </view>
                    <!-- 笔记作者信息和点赞情况 -->
                    <view class="note-info">
                      <view class="note-author-info">
                        <image class="author-avatar" lazy-load="true" :src="data.attList[idx].authorAvatar"></image>
                        <text class="author-name">{{data.attList[idx].authorName}}</text>
                      </view>
                      <view class="like-box" @click.stop="likeAttNote(idx)">
                        <image class="like-icon" v-if="data.attList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                        <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                        <text class="like-num">{{data.attList[idx].likeNum}}</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="flowList">
                 <view class="note" v-for="idx in data.attRight" @click="showNote(data.attList[idx].id,idx)">
                   <!-- 笔记封面 -->
                   <view class="note-img-box">
                     <image mode="widthFix" lazy-load="true" class="note-img" :src="data.attList[idx].url"></image>
                   </view>
                   <!-- 笔记标题内容 -->
                   <view class="note-content-box">
                     <rich-text class="note-text">{{data.attList[idx].title}}</rich-text>
                   </view>
                   <!-- 笔记作者信息和点赞情况 -->
                   <view class="note-info">
                     <view class="note-author-info">
                       <image class="author-avatar" lazy-load="true" :src="data.attList[idx].authorAvatar"></image>
                       <text class="author-name">{{data.attList[idx].authorName}}</text>
                     </view>
                     <view class="like-box" @click.stop="likeAttNote(idx)">
                       <image class="like-icon" v-if="data.attList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                       <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                       <text class="like-num">{{data.attList[idx].likeNum}}</text>
                     </view>
                   </view>
                 </view>         
              </view>   
              </view>
              <view class="tip-tag" v-if="data.attList.length >= data.attTotal">
                暂无更多了
              </view>
            </scroll-view>
         </swiper-item>
         <!-- 发现 -->
          <swiper-item class="tab-swiper-item star-now">
           <scroll-view class="note-list" scroll-y="true" lower-threshold="50" @scrolltolower="getDiscoverNote" refresher-enabled="true" @refresherrefresh="refreshDisCoverNote" :refresher-triggered="data.isRefreshDisCover" @refresherpulling="refresherpullingDisCoverFun">
             <view class="waterfall">
              <!-- 笔记 -->
              <view class="flowList">
                <view class="note" v-for="idx in data.noteLeft" @click="showNote(data.noteList[idx].id,idx)">
                  <!-- 笔记封面 -->
                  <view class="note-img-box">
                    <image mode="widthFix" lazy-load="true" class="note-img" :src="data.noteList[idx].url"></image>
                  </view>
                  <!-- 笔记标题内容 -->
                  <view class="note-content-box">
                    <rich-text class="note-text">{{data.noteList[idx].title}}</rich-text>
                  </view>
                  <!-- 笔记作者信息和点赞情况 -->
                  <view class="note-info">
                    <view class="note-author-info">
                      <image class="author-avatar" lazy-load="true" :src="data.noteList[idx].authorAvatar"></image>
                      <text class="author-name">{{data.noteList[idx].authorName}}</text>
                    </view>
                    <view class="like-box" @click.stop="likeNote(idx)">
                      <image class="like-icon" v-if="data.noteList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                      <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                      <text class="like-num">{{data.noteList[idx].likeNum}}</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="flowList">
               <view class="note" v-for="idx in data.noteRight" @click="showNote(data.noteList[idx].id,idx)">
                 <!-- 笔记封面 -->
                 <view class="note-img-box">
                   <image mode="widthFix" lazy-load="true" class="note-img" :src="data.noteList[idx].url"></image>
                 </view>
                 <!-- 笔记标题内容 -->
                 <view class="note-content-box">
                   <rich-text class="note-text">{{data.noteList[idx].title}}</rich-text>
                 </view>
                 <!-- 笔记作者信息和点赞情况 -->
                 <view class="note-info">
                   <view class="note-author-info">
                     <image class="author-avatar" lazy-load="true" :src="data.noteList[idx].authorAvatar"></image>
                     <text class="author-name">{{data.noteList[idx].authorName}}</text>
                   </view>
                   <view class="like-box" @click.stop="likeNote(idx)">
                     <image class="like-icon" v-if="data.noteList[idx].like > 0" src="../../static/img/like-btn2.png"></image>
                     <image class="like-icon" v-else src="../../static/img/like-btn1.png"></image>
                     <text class="like-num">{{data.noteList[idx].likeNum}}</text>
                   </view>
                 </view>
               </view>            
             </view>   
             </view>
           </scroll-view>
         </swiper-item>
        </swiper>
    </view>
	</view>
</template>

<script setup>
import { reactive, ref,toRefs } from 'vue';
import { onShow,onLoad,onUnload,onHide } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'
import indexSkeletonVue from '../../components/index-skeleton.vue';

const data = reactive({
  tabIndex:1,
  noteList:[],
  noteLeft:[],
  noteRight:[],
  noteTotal:0,
  notePageNum:0,
  notePageSize:10,
  noteLeftHeight:0,
  noteRightHeight:0,
  attList:[],
  attLeft:[],
  attRight:[],
  attTotal:0,
  attPageNum:0,
  attPageSize:10,
  attLeftHeight:0,
  attRightHeight:0,
  idList:[],
  isRefreshDisCover: false,
  isRefreshAtt: false,
});

onShow(() => {
  //监听页面返回的点赞事件
  if(uni.getStorageSync("curUser") == null){
    initData()
  }
  updateLikeData()
  getAttNote()
})

function initData(){
  data.noteList=[]
  data.noteLeft=[]
  data.noteRight=[]
  data.noteTotal=0
  data.notePageNum=0
  data.notePageSize=10
  data.noteLeftHeight=0
  data.noteRightHeight=0
  data.attList=[]
  data.attLeft=[]
  data.attRight=[]
  data.attTotal=0
  data.attPageNum=0
  data.attPageSize=10
  data.attLeftHeight=0
  data.attRightHeight=0
  data.idList=[]
  data.isRefresh= false
}

onLoad(()=>{
  getDiscoverNote()
})

onUnload((options)=>{
  uni.$off('like');  
})

function refreshDisCoverNote(){
  data.noteList=[]
  data.noteLeft=[]
  data.noteRight=[]
  data.noteTotal=0
  data.notePageNum=0
  data.notePageSize=10
  data.noteLeftHeight=0
  data.noteRightHeight=0
  data.idList=[]
  getDiscoverNote()
  setTimeout(() => {
    data.isRefreshDisCover= false
  }, 2000)
}

function refreshAttNote(){
  data.attList=[]
  data.attLeft=[]
  data.attRight=[]
  data.attTotal=0
  data.attPageNum=0
  data.attPageSize=10
  data.attLeftHeight=0
  data.attRightHeight=0
  data.idList=[]
  getAttNote()
  setTimeout(() => {
    data.isRefreshAtt= false
  }, 2000)
}

function refresherpullingDisCoverFun(){
  data.isRefreshDisCover = true
}

function refresherpullingAttFun(){
  data.isRefreshAtt = true
}

function getDiscoverNote(){
  uni.request({
    url: helper.webUrl + "/note/getDiscoverNote",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      idList: data.idList.length == 0 ? '' : data.idList.length
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        let list = res.data.data
        for(let i = 0; i < list.length; i++){
          data.noteList.push(list[i])
          data.idList.push(list[i].id)
          if(data.noteLeftHeight <= data.noteRightHeight){
            let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
            data.noteLeftHeight += num + helper.noteBox
            data.noteLeft.push(data.noteList.length-1)
          }else{
            let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
            data.noteRightHeight += num + helper.noteBox
            data.noteRight.push(data.noteList.length-1)
          }
        }
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function updateLikeData(){
  uni.$on('like',(likeData)=>{
    if(likeData.event != 4){
      return
    }
    console.log(likeData)
    //我的关注和发现
      if(data.tabIndex == 0){
        console.log("点赞事件:我的关注"+likeData.index+" "+likeData.like)
        if(data.attList[likeData.index].like < likeData.like){
          data.attList[likeData.index].likeNum++
        }else if(data.attList[likeData.index].like > likeData.like){
          data.attList[likeData.index].likeNum--
        }
        data.attList[likeData.index].like = likeData.like
      }else{
        console.log("点赞事件:我的发现"+likeData.index+" "+likeData.like)
        if(data.noteList[likeData.index].like < likeData.like){
          data.noteList[likeData.index].likeNum++
        }else if(data.noteList[likeData.index].like > likeData.like){
          data.noteList[likeData.index].likeNum--
        }
        data.noteList[likeData.index].like = likeData.like
      }
  })
}

// 修改tab页面
function changeTab(index){
  data.tabIndex = index
}

function getAttNote(){
  uni.request({
    url: helper.webUrl + "/note/getMyAttNote",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      pageNum: data.attPageNum,
      pageSize: data.attPageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        let list = res.data.data.record
        data.attTotal = res.data.data.total
        data.attPageNum++
        for(let i = 0; i < list.length; i++){
          data.attList.push(list[i])
          if(data.attLeftHeight <= data.attRightHeight){
            let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
            data.attLeftHeight += num + helper.noteBox
            data.attLeft.push(data.attList.length-1)
          }else{
            let num = list[i].height / list[i].width > helper.maxNoteImg ? helper.maxNoteImg : list[i].height / list[i].width
            data.attRightHeight += num + helper.noteBox
            data.attRight.push(data.attList.length-1)
          }
        }
      }
      if(res.data.code == 401){
        helper.logout()
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getMoreAttNote(){
  console.log("加载更多笔记。。。")
  //判断是否加载完
  if(data.attTotal <= data.attList.length){
    return
  }
  getAttNote()
}

// 查找
function search(){
  console.log("查找")
  uni.navigateTo({
    url:"/subpages/search/search"
  })
}

// 查看笔记
function showNote(noteId,index){
  console.log("查看笔记"+noteId)
  uni.navigateTo({
    url:`/subpages/noteDetail/noteDetail?noteId=${noteId}&index=${index}&event=4`
  })
}

// 点赞笔记
async function likeAttNote(idx){
  console.log("点赞关注列表"+idx)
  if(helper.getToken() == null){
    return
  }
  let noteId = data.attList[idx].id
  if(data.attList[idx].like > 0){
    let res = await helper.dislikeNoteReq(noteId)
    if(res.data.code == 200){
      data.attList[idx].like = 0
      data.attList[idx].likeNum--
    }
  }else{
    let res = await helper.likeNoteReq(noteId)
    if(res.data.code == 200){
      data.attList[idx].like = 1
      data.attList[idx].likeNum++
    }
  }
}

// 点赞笔记
async function likeNote(idx){
  console.log("点赞发现列表"+idx)
  if(helper.getToken() == null){
    return
  }
  let noteId = data.noteList[idx].id
  if(data.noteList[idx].like > 0){
    let res = await helper.dislikeNoteReq(noteId)
    if(res.data.code == 200){
      data.noteList[idx].like = 0
      data.noteList[idx].likeNum--
    }
  }else{
    let res = await helper.likeNoteReq(noteId)
    if(res.data.code == 200){
      data.noteList[idx].like = 1
      data.noteList[idx].likeNum++
    }
  }
  
}
</script>

<style>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.nav-bar-box{
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
  width: 100vw;
  height: 7vh;
  border-bottom: 1px solid #c5c5c5;
}
.nav-bar{
  display: flex;
}
.search-box{
  height: 7vh;
  padding-left: 5px;
  display: flex;
  align-items: center;
}
.search-img{
  width: 35px;
  height: 35px;
}
.tab-box{
  width: 70vw;
  display: flex;
  height: 7vh;
  justify-content: center;
}
.tab-item{
  display: flex;
  align-items: center;
  padding-inline: 10px;
}
.tab-item-actived{
  border-bottom: 2px solid #89C0FF;
}
.tab-text{
  font-size: 20px;
  font-weight: bold;
}
.note-list-view{
  width: 100vw;
}
.note-list{
  width: 100vw;
  height: 89vh;
  background-color: #f4f4f4;
}
.tab-swiper{
  width: 100vw;
  height: 89vh;
  background-color: #f4f4f4;
}
</style>